<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog
    v-model="props.addVisible"
    :title="modelType === 'add' ? '新建库类型' : modelType === 'view' ? '查看库类型' : '修改库类型'"
    width="500"
    @close="handleVisible('cancel')"
  >
    <el-form ref="formRef" size="small" :rules="rules" :model="form" label-position="top" label-width="100px">
      <el-form-item label="要素库的库类型" prop="name" required>
        <el-input placeholder="请输入要素库的库类型" v-model="form.name" :disabled="modelType === 'view'" />
      </el-form-item>

      <el-divider>技术元数据</el-divider>

      <el-form-item label="数据库模式" prop="databaseSchema" required>
        <el-select v-model="form.databaseSchema" placeholder="请选择数据库模式" :disabled="modelType === 'view'">
          <el-option v-for="item in props.databaseSchema" :key="item.value" :label="item.label" :value="item.label"  />
        </el-select>
      </el-form-item>

      <el-form-item label="访问权限" prop="permissions" required>
        <el-select v-model="form.permissions" placeholder="请选择访问权限" :disabled="modelType === 'view'">
          <el-option v-for="item in props.accessAuthority" :key="item.value" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>

      <el-form-item label="数据格式" prop="databaseFormat" required>
        <el-select v-model="form.databaseFormat" placeholder="请选择数据格式" :disabled="modelType === 'view'">
          <el-option v-for="item in props.dataFormat" :key="item.value" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>

      <el-form-item label="存储位置" prop="storageLocation" required>
        <div v-for="(item, index) in form.storageLocation" :key="index" class="location-item">
          <el-input v-model="form.storageLocation[index]" placeholder="请输入表英文名称" maxlength="100" :disabled="modelType === 'view'" />
          <el-button type="danger" @click="removeLocation(index)" style="margin-left: 10px;" :disabled="modelType === 'view'">删除</el-button>
        </div>
        <el-button type="primary" style="margin-left: 10px" @click="addLocation" class="location-item" :disabled="modelType === 'view'"
          >添加</el-button
        >
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="handleVisible('cancel')">取消</el-button>
        <el-button size="small" type="primary" @click="submitAdd">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { addDatabase, updateDatabase } from '@/api/metaData';
const props = defineProps(['addVisible', 'dataFormat', 'accessAuthority', 'databaseSchema', 'rowData', 'modelType']);
const emits = defineEmits(['handleEvent']);
const { proxy } = getCurrentInstance();
const modelType = props.modelType;
const formRef = ref();
// 组织数据
const form = ref({
  id: props?.rowData?.id || '',
  name: props?.rowData?.name || '',
  databaseSchema: props?.rowData?.databaseSchema || '',
  permissions: props?.rowData?.permissions || '',
  databaseFormat: props?.rowData?.databaseFormat || '',
  storageLocation: (props?.rowData?.storageLocation || '').split(',') // 将字符串分割成数组
});
// 向父组件发出信号控制弹窗的隐藏
const handleVisible = (type) => {
  if (type === 'cancel') {
    emits('handleEvent', { type: 'view' });
  }
};

// 增加/删除存储位置
const addLocation = () => {
  form.value.storageLocation.push('');
};
const removeLocation = (index) => {
  form.value.storageLocation.splice(index, 1);
};

// 数据校验规则
const rules = ref({
  name: [{ required: true, message: '请输入要素库的库类型', trigger: 'blur' }],
  databaseSchema: [{ required: true, message: '请选择数据库模式', trigger: 'blur' }],
  permissions: [{ required: true, message: '请选择访问权限', trigger: 'blur' }],
  databaseFormat: [{ required: true, message: '请选择数据格式', trigger: 'blur' }],
  storageLocation: [{ required: true, message: '请输入存储位置', trigger: 'blur' }]
});

// 表单提交
const submitAdd = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return;
    } else {
      let dataObj = JSON.parse(JSON.stringify(form.value)); // 深拷贝数据
      // 处理储存位置:将数组转为字符串
      dataObj.storageLocation = dataObj.storageLocation.join(',');
      // 发送请求
      if (modelType === 'modify') {
        updateDatabase(dataObj).then((res) => {
          if (res?.code === 200) {
            emits('handleEvent', { type: 'add' });
            proxy?.$modal.msgSuccess('修改成功');
          }
        });
      } else if (modelType === 'add') {
        addDatabase(dataObj).then((res) => {
          if (res?.code === 200) {
            emits('handleEvent', { type: 'add' });
            proxy?.$modal.msgSuccess('新增成功');
          }
        });
      } else if (modelType === 'view') {
        emits('handleEvent', { type: 'view' });
      }
    }
  }
);
};
</script>

<style scoped>
.location-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 增加间隔 */
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.el-dialog__header {
  font-weight: bold;
}
</style>
